<template>
	<view>
		<view class="free-filter">
			<view class="free-filter-title" 
			v-for="item in filterList" :key="item.id"
			:class="item.id==current?'active':''"
			@click="changeFilter(item.id)"
			>
				{{item.name}}
			</view>
		</view>
		<view class="free-list">
			<view class="new-list">
				<view class="new-list-item"
				v-for="item in courseList"
				:key="item.id"
				>
					<view class="new-item-img">
						<image :src="item.courseCover" ></image>
					</view>
					<view class="new-item-main">
						<view class="new-item-title">
							<!-- 晋级TypeScript高手，成为抢手的项目高手 -->
							{{item.courseName}}
						</view>
						<view class="new-item-type">
							{{courseType(item.courseLevel)}}
						</view>
						<view class="new-item-total">
							<view class="new-item-price" v-if="item.discountPrice==0">
								<view class="">
									免费
								</view>
							</view>
							<view class="new-item-price" v-else>
								<view class="">
									限时优惠
								</view>
								<view class="new-item-discountPrice">
									￥ {{item.discountPrice}}
								</view>
							</view>
							<view class="new-item-number">
								{{item.clicks}}人学习
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {freeCourse} from '@/api/course.js'
	import {mixin} from '@/mixins/mixin.js'
	export default {
		mixins: [mixin],
		data() {
			return {
				current: 1,
				filterList: [
					{id:1,name:'综合推荐'},
					{id:2,name:'最新'},
					{id:3,name:'浏览最多'}
				],
				courseList: [],
				courseParams: {
					pageNum:1,
					pageSize:10,
					entity:{
						courseLevel:3
					}
				}
			}
		},
		methods: {
			getCourse(param){
				freeCourse(param).then(res=>{
					this.courseList = res.pageInfo.list
				})
			},
			changeFilter(id){
				this.current = id
				if(id==1){
					this.courseParams.sortBy=''
				} else if(id==2){
					this.courseParams.sortBy='price-desc'
				} else if(id==3){
					this.courseParams.sortBy='clicks-desc'
				}
				this.getCourse(this.courseParams)
			}
		},
		mounted() {
			this.getCourse(this.courseParams)
		}
	}
</script>

<style>
.free-filter{
	display: flex;
	padding: 14rpx;
}
.free-filter-title{
	padding-left: 44rpx;
	font-size: 28rpx;
	font-weight: 400;
	color: #A0A4Ad;
}
.free-list{
	padding: 14rpx;
}
.new-title-more{
	font-size: 26rpx;
	font-weight: 400;
	color: #A0A4AD;
}
.new-list-item{
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 40rpx;
}

.new-list-item:after{
	content: '';	
	position: absolute;
	bottom: -20rpx;
	margin-top: 40rpx;
	width: 100%;
	border-bottom: 1px solid #000000;
	opacity: 0.15;
}
.new-item-img{
	width: 237rpx;
	height: 186rpx;
	border-radius: 12rpx;
	background-color:#ccc;
}
.new-list-item image{
	width: 100%;
	height: 100%;
	border-radius: 12rpx;
}
.new-item-main{
	flex: 1;
	display: flex;
    flex-direction: column;
	justify-content: space-between;
	height: 186rpx;
	padding-left: 23rpx;
}
.new-item-title{
	font-size: 29rpx;
	font-weight: 400;
	color: #191919;
}
.new-item-type{
	font-size: 24rpx;
	font-weight: 400;
	color: #c5c5c5;
}
.new-item-total{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.new-item-price{
	display: flex;
	font-size: 21rpx;
	font-weight: 600;
	color: #FF4B5C;
}
.new-item-number{
	font-size: 21rpx;
	font-weight: 400;
	color: #A0A4AD;
}
.new-item-discountPrice{
	padding-left: 21rpx;
}
.active{
	font-weight: 400;
	color: #000000;
}
</style>
